<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>autobox-download by http://www.jb51.net</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <meta name="author" content="Yehuda Katz">
    <link rel="stylesheet" href="jquery.ui.autobox.css" type="text/css" media="screen" />
    <style type="text/css">
      .matching {
      font-weight: bold;
      text-decoration: underline;
      }
    </style>
<!-- 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
 -->
	<script type="text/javascript" src="/autostatistics/commonjs/jquery1.7.2/jquery-1.7.2.min.js"></script>
  <script src="jquery.templating.js"></script>
  <script src="jquery.ui.autobox.ext.js"></script>
  <script src="jquery.ui.autobox.js"></script>
  <script>
    if(!window.console){
      console = typeof(console) !== 'undefined' ? console : { log: function(msg) { $('#log').html(msg + '<br/>\n' + $('#log').html() ); } };
    }

    $(function() {
      $("input.autobox.0").autobox({
        ajax: "list",
        match: function(typed) { return this.text.match(new RegExp(typed)); },
        insertText: function(obj) { return obj.text },
        templateText: "<li>Hey: <%= text %></li>",
        prevals : ['fred@wilma.com', 'betty@barney.com']
      });

      var list1 = [{text: 'Curious George'}, {text: 'George of the Jungle'}, {text: 'Felix the Cat'}];
      var box =
      $("input.autobox.1").autobox({
        list: list1,
        match: function(typed) {
          this.typed = typed;
          this.pre_match = this.text;
          this.match = this.post_match = '';
          if (!this.ajax && !typed || typed.length == 0) { return true; }
          var match_at = this.text.search(new RegExp("\\b" + typed, "i"));
          if (match_at != -1) {
            this.pre_match = this.text.slice(0,match_at);
            this.match = this.text.slice(match_at,match_at + typed.length);
            this.post_match = this.text.slice(match_at + typed.length);
            return true;
          }
          return false;
        },
        insertText: function(obj) { return obj.text },
        templateText: "<li><%= pre_match %><span class='matching' ><%= match %></span><%= post_match %></li>"
      });
      box[0].addBox('Betty Boop');

      $("input.autobox.2").autobox({
        ajax: "list",
        match: function(typed) { return this.text.match(new RegExp(typed, "i")); },
        insertText: function(obj) { return obj.text },
        templateText: "<li>Hey: <%= text %></li>"
      })

      $("input.autobox")
        .bind("activate.autobox", function(e, d) { console.log(d); })
        .bind("cancel.autobox", function(e) { console.log("Cancelled"); });
    });
  </script>
</head>
<body>
  <small>(goodbye, Hello, w00t, w00tness)</small>
  <input type="text" class="autobox 0" name="autobox-0" />
  <fieldset style="width: 500px;"><legend>Form</legend>
  <form>
    <small>(Curious George, Felix the Cat, George of the Jungle)</small>
    <input type="text" class="autobox 1" name="autobox-1" />
    <small>(goodbye, Hello, w00t, w00tness)</small>
    <input type="text" class="autobox 2" name="autobox-2" />
    <input type="submit" value="stub submit"/>
  </form>
  </fieldset>
<div id="log"></div>

</body>
</html>
